<div id="chartmanage" v-cloak>
    <Row type="flex" justify="center">
        <i-select v-model="year" style="width:200px" placeholder="请选择年份">
            <i-option v-for="item in yearList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
        </i-select>
        <i-select v-model="month" style="width:200px" placeholder="如不选择月份，则显示全年">
            <i-option v-for="item in monthList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
        </i-select>
        <i-button type="primary" @click="query" style="margin-right:5px;">单次查询</i-button>
        <i-button type="primary" @click="addChart" style="margin-right:5px;">叠加分析</i-button>
        <i-button type="primary" @click="clearChart" style="margin-right:5px;">清除图表</i-button>
    </Row>
    <Row type="flex" justify="center" style="width: 100%;">
        <i-col span="19" pull="1" style="width: 70%;">
            <div id="myChart" style="height:800px;width: 100%;"></div>
        </i-col>
        <i-col span="5" pull="1" style="width: 30%;">
            <div style="background:#eee;width: 100%;">
                <Card style="width: 100%;">
                    <p slot="title" style="text-align: center;width: 100%;">统计</p>
                    <i-table :columns="stats" :data="total" height="700" style="width: 100%;"></i-table>
                </Card>
            </div>
        </i-col>
    </Row>
</div>
<script type="text/javascript" src="JS/page/delivery_note/chartmanage.js"></script>
<style type="text/css">
    .ivu-col-pull-1
    {
        right: 0;
    }
    .ivu-table table 
    {
        table-layout: unset !important; 
        width: 100% !important;
    }
    .ivu-table th 
    {
        height: 40px;
        width: 33%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        background-color: #f8f8f9;
    }
    .ivu-table-row
    {
        width: 100%;
    }
    .ivu-table th 
    {
        width: 33%;
        height: 40px;
        box-sizing: border-box;
        text-align: center;
        text-overflow: ellipsis;
        vertical-align: middle;
        border-bottom: 1px solid #e9eaec;
    }
    .ivu-table td
    {
        width: 33%;
        height: 48px;
        box-sizing: border-box;
        text-align: center;
        text-overflow: ellipsis;
        vertical-align: middle;
        border-bottom: 1px solid #e9eaec;
    }
</style>